package com.csw.compose.ui.module.component.container

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
import androidx.compose.ui.util.lerp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import kotlin.math.absoluteValue

@Preview(heightDp = 1200)
@Composable
fun PagerPreview() {
    BasePage({}, "分页组件（Pager）") { PagerPage() }
}

class PagerData {
    companion object : Destination("PagerPage")
}

/**
 * [参考](https://developer.android.google.cn/develop/ui/compose/layouts/pager?hl=zh-cn)
 */
@Composable
fun PagerPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Pager组件类似ViewPager、ViewPager2，实现横向、纵向的分页切换效果")

        LargeSpacer()
        UlItem("HorizontalPager")
        LabelText("横向分页组件")
        val pagerState1 = rememberPagerState(0) { 4 }
        HorizontalPager(
            pagerState1,
            Modifier
                .fillMaxWidth()
                .height(200.dp)
                .border(2.dp, Color.Gray, RoundedCornerShape(5.dp)),
            contentPadding = PaddingValues(20.dp),
            pageSpacing = 10.dp,
            pageSize = object : PageSize {
                override fun Density.calculateMainAxisPageSize(
                    availableSpace: Int,
                    pageSpacing: Int
                ): Int {
                    return availableSpace
                }
            },
            ) {
            Box(
                Modifier
                    .graphicsLayer {
                        //graphicsLayer 用于绘制前设置画布的缩放、旋转、偏移、透明度等变换，我们通过这个方法来实现类似ViewPager的转场效果
                        //我们实现淡入淡出效果，这里先计算出画面偏移量，从pagerState中可以得到当前显示位置
                        //currentPage 表示当前页面下标（当前页面以谁更靠近显示中心为准）
                        //currentPageOffsetFraction 表示当前页面离页面中心还差多少页面距离
                        //两者相加可得到显示位置，与当前要绘制的页面下标相减，得到页面离中心的距离（绝对值[0,1]）
                        val pageOffset = (pagerState1.currentPage + pagerState1
                            .currentPageOffsetFraction - it
                                ).absoluteValue
                        //这里修改画布透明度，使得绘制页面时根据距离计算得到淡入淡出效果
                        //lerp是线性插值函数，自动计算开始到结束位置中某个点位的值，fraction即点位到开始位置占总路程的比例
                        alpha = lerp(
                            start = 0.3f,
                            stop = 1f,
                            fraction = 1f - pageOffset.coerceIn(0f, 1f)
                        )
                    }
                    .fillMaxSize()
                    .background(Color.Red.copy(0.1f * (it + 1))),
                contentAlignment = Alignment.Center
            ) {
                Text("Page${it}")
            }
        }
        OlItem(1, "contentPadding")
        LabelText("设置内容在Pager中的边距，与Modifier.padding的差异在于非当前页可以在padding区域显示")
        OlItem(2, "pageSpacing")
        LabelText("设置页面间距")
        OlItem(3, "pageSize")
        LabelText("设置页面大小，默认页面大小为填充父容器")
        OlItem(4, "beyondViewportPageCount")
        LabelText("超出视窗的页面数量，同ViewPager的预缓冲页面，这里也用于设置Pager的预加载页面数量，默认0表示可见时才加载")
        OlItem(5, "verticalAlignment")
        LabelText("垂直方向的对齐效果，默认居中")
        OlItem(6, "userScrollEnabled")
        LabelText("用户是否可以滚动Pager")
        OlItem(7, "reverseLayout")
        LabelText("反转布局，即从右往左排")
        OlItem(8, "snapPosition")
        LabelText("停靠位置？不太理解，效果不对")

        LargeSpacer()
        UlItem("VerticalPager")
        LabelText("纵向分页组件，可设置的参数大体与横向分页组件一致")
        val pagerState2 = rememberPagerState(0) { 4 }
        VerticalPager(
            pagerState2,
            Modifier
                .fillMaxWidth()
                .height(200.dp)
                .border(2.dp, Color.Gray, RoundedCornerShape(5.dp)),
        ) {
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color.Red.copy(0.1f * (it + 1))),
                contentAlignment = Alignment.Center
            ) {
                Text("Page${it}")
            }
        }


    }
}